<template>
  <div class="topic_item">
    <div class="topic">
      <span class="order"> {{ topic.order }}.&nbsp;</span>
      <div ref="content" class="content" v-html="topic.title"></div>
    </div>
    <answer-explain
      v-if="reviewResult"
      :reviewResult="reviewResult"
    ></answer-explain>
  </div>
</template>

<script>
// import BlankInput from "../BlankInput.vue
/**
 * 分析：
 * 题序号传进来我就显示，不传进来我就不显示
 * 传进来的填空题，要告诉我空的前后文和空在哪里。
 * 像下面的那个一样，然后我要做的就是把那个转换为一个填空题形式如下：
 * 25. 海内存知己，____。_____,_____。
 * 注意其中的_____是可以输入的，点击输入。
 */
import AnswerExplain from "@/components/AnswerExplain.vue";

export default {
  name: "BlankQuestion",
  // components: { BlankInput },
  props: ["topic", "finish", "type", "answer", "reviewResult"],
  components: {
    AnswerExplain,
  },
  data() {
    return {
      blanks: [],
    };
  },
  mounted() {
    const disabled = this.type == 2 || this.type == 3;
    const ipts = this.$refs.content.querySelectorAll("input");
    ipts.forEach((ipt, idx) => {
      ipt.onfocus = () => {
        console.log("focus");
      };
      ipt.onblur = (e) => {
        console.log(e);
        const value = e.target.value;
        const order = e.target.dataset.order * 1;
        this.blanks[idx] = e.target.value;

        this.finish(this.topic.order - 1, this.blanks);
      };
    });

    if (this.answer) {
      ipts.forEach((v, i) => {
        // console.log(V);
        v.value = this.answer[i];
        v.disabled = disabled;
      });
    }
  },
};
</script>
<style scoped>
.topic {
  display: flex;
  flex-direction: row;
}
</style>